<template>
  <nav class="nav-contenter">
      <ul>
          <li v-for="(item,index) in List" :key="item.id" @click="index=n"
          :class="index==n?'active':''">
          {{item.name}}

          </li>
      </ul>
  </nav>
</template>

<script>
export default {
    name:'vNav',
    data(){
        return{
            List:[
                 {id:'01',name:'管理中心'},
                {id:'02',name:'商品管理'},
                {id:'03',name:'会员管理'},
                {id:'04',name:'订单管理'},
            ],
            n:0,
        }
    }

}
</script>

<style scoped>
#Member_wrap .nav-contenter {
  background-color: #00152a;
  color: #fff;
  padding: 20px 0;
  width: 150px;
}
#Member_wrap .nav-contenter li {
  padding: 10px 0;
  margin: 10px 0;
}
#Member_wrap .nav-contenter .active {
  background-color: #0077b9;
}

</style>